<template>
    <el-dialog :close-on-click-modal="false" v-model="centerDialogVisible" title="方案新增" width="550" align-center
        @close="centerDialogVisible1">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="方案名称" label-width='75'>
                <el-input v-model="formInline.schemeName" placeholder="" clearable />
            </el-form-item>
            <el-form-item label="方案编码" label-width='75'>
                <el-input v-model="formInline.schemeCode" placeholder="" clearable />
            </el-form-item>
            <el-form-item label="时间间隔" label-width='75'>
                <el-select v-model="formInline.timeintervals" placeholder="" clearable>
                    <el-option label="15分钟" value="15分钟" />
                    <el-option label="30分钟" value="30分钟" />
                    <el-option label="1小时" value="1小时" />
                    <el-option label="2小时" value="2小时" />
                    <el-option label="3小时" value="3小时" />
                    <el-option label="6小时" value="6小时" />
                </el-select>
            </el-form-item>
            <el-form-item label="模式" label-width='75'>
                <el-select v-model="formInline.schememode" placeholder="" clearable>
                    <el-option label="天" value="天" />
                    <el-option label="月" value="月" />
                    <el-option label="季度" value="季度" />
                    <el-option label="年" value="年" />
                </el-select>
            </el-form-item>
            <el-form-item label="适用部门" label-width='75'>
                <el-input v-model="formInline.department" placeholder="" clearable />
            </el-form-item>
            <el-form-item label="处置人" label-width='75'>
                <el-input v-model="formInline.disposalpersonnel" placeholder="" clearable style="width: 165px;" />
            </el-form-item>
            <el-form-item label="状态" label-width='75'>
                <el-switch v-model="formInline.schemeStates" @change="changeSeitch" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="centerDialogVisible1">取消</el-button>
                <el-button type="primary" @click="centerDialogVisible2">
                    确定
                </el-button>
            </div>
        </template>
        <div style="font-weight: 500;color: #000;">站点选择</div>
        <div style="margin-left: 65px;">
            <transfer></transfer>
        </div>
    </el-dialog>
</template>
<script setup>
import { ref, defineProps, defineEmits, reactive, watch, } from 'vue'
import { postaddTable,postprojectManageOrder } from '../../src/http/http'
import { ElMessage } from 'element-plus'
import transfer from '../components/transfer.vue'
import bus from '../tools/eventBus'

const sideID = ref([])
const siteName = ref([])
// import {   PlanTable } from '../../src/views/theme/ProgramManage.vue'

const props = defineProps({
    DialogIsg: { type: Boolean, default: false },
    tableID: { type: String, default: () => null },
    DataID: { type: String, default: () => null }
})
watch(() => props.DataID, (newValue) => {
    console.log(newValue);
    Dataid.value = newValue
});

const emit = defineEmits(['adialog','onaddTable','handleonSubmit']);
const centerDialogVisible = ref(true)
const Dataid = ref(null)
const isSwitchOn = ref(true)

function changeSeitch(e) {
    console.log(e, 'e');
    if (!e) {
        isSwitchOn.value = true
    } else {
        isSwitchOn.value = false
    }
}
const formInline = reactive({
    schemeName: '',
    schemeCode: '',
    schememode: '',
    timeintervals: '',
    disposalpersonnel: '',
    user: '',
    delivery: true,
    pattern: '',
    department: '',//部门
    // schemeorder: true,
})


const onSubmit = () => {
    console.log('submit!')
}

function centerDialogVisible1() {
    emit('adialog', false)
}

function wrapAsync(fn) {
    return new Promise((resolve, reject) => {
        fn((error) => {
            if (error) reject(error);
            else resolve();
        });
    });
}

function parms() {
    return {
        'siteIds': sideID.value,
        "schemeName": formInline.schemeName,
        "schemeCode": formInline.schemeCode,
        "schememode": formInline.schememode,
        "disposalpersonnel": formInline.disposalpersonnel,
        "timeintervals": formInline.timeintervals,
        "schemeStates": formInline.schemeStates,
        'trialdepartment':formInline.department,
         'sitename': siteName.value,
        "schemeID": 'a3464779-8548-43be-84bc-a940558a6a02',
        'schemeorder':1
    }
}

function centerDialogVisible2() {
    emit('adialog', false)

    DypostTables()

}

bus.on('checkData', (val) => {
        // console.log(val.checkData,'val');
         sideID.value = val.checkData
        siteName.value = val.checkName
        // sideID.value.push(val.checkData)
        // siteName.value.push(val.checkName)
        // console.log(siteName.value,sideID.value);
        
      })

      function DypostTables() {
        emit('handleonSubmit');
    postaddTable(parms())
        .then((res) => {
            console.log(res.data);
            console.log('Response status:', res.status); // 添加这行
            const status = res.status
            if (res.status === 200) {
                // console.log('Emitting handleonSubmit'); // 添加这行
                postprojectManageOrder().then((res)=>{
                    console.log(res);
                    console.log('排序');
                    
                })
                ElMessage({
                    message: '新增成功',
                    type: 'success',
                });            
            }
        })
        .catch((error) => {
            console.error('Error occurred:', error); // 捕捉错误
        });

        emit('handleonSubmit');

}

</script>

<style scoped>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}

.demo-form-inline {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.demo-form-inline .el-form-item {
    display: flex;
    align-items: center;
    margin: 10px;
    flex: 1;
    min-width: 200px;
}

::v-deeep .el-form-item__label {
    width: 75px !important;
}

.demo-form-inline .el-input,
.demo-form-inline .el-select {
    width: 200px;
}
</style>